<!-- 服务推广 -->
<template>
	<view class="box">
		<view class="page_top" :style="{ 'background': topNav ? 'white' : 'transparent', 'z-index': 199 }">
			<top-status></top-status>
			<view class="tabsBack">
				<view @click="goBack()" class="blackbox">
					<!-- <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17152491719361330.png"
							mode="widthFix"></image> -->
					<uni-icons :color="topNav ? 'black' : 'lightgray'" type="left" size="30"></uni-icons>
				</view>
				<!-- <view class="topTitle" v-show="topNav">{{ resData.Name }}</view> -->
			</view>
		</view>
		<view class="conbox" v-if="false">
			<view class="head_portrait">
			<image :src="user.HeadImgUrl" mode="aspectFill"></image>
			<text>{{user.Name}}</text>
			</view>

			<view class="data_statistics">
			<view class="person_num">
				<text v-if="Array.isArray(userList) && userList.length != 0">{{userList.length}}</text>
				<text v-else>0</text>
				<span class="yong">用户</span>
			</view>
			<block v-if="is_super_user">
				<view class="person_num" v-if="is_super_user" @click="go_dealer()">
					<text v-if="Array.isArray(dealerList) && dealerList.length != 0">{{dealerList.length}}</text>
					<text v-else>0</text>
					<span class="yong">代理</span>
				</view>
			</block>
			
			<view class="profit" @tap="goto_my_profit">
				<text>{{amount_of_money}}</text>
				<span>收益</span>
			</view>
			</view>
		</view>
		
		<view class="acquire" v-if="false">
			<!-- #ifdef MP-WEIXIN -->
			<button class="share" type="default" data-name="shareBtn" open-type="share">分享给好友</button>
			<view class="sharebox" @click="nav_to('/pages/user/placard')">专属推广码</view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<button class="share" type="default" @click="shareWX">转发给好友</button>
			<!-- <view class="share" @click="sharePYQ">分享朋友圈</view> -->
			<view class="sharebox" @click="nav_to('/pages/user/placard')">专属推广码</view>
			<!-- #endif -->
			
		</view>
		<view class="statistics" v-if="false">
			<text class="desc">每邀请一个好友注册</text>
			<text class="desc">1、获得七天金卡会员（月卡会员顺延，年卡会员无效）</text>
			<text class="desc">2、好友收到所有礼物，获得10%的分成。</text>
			<text class="desc">3、被邀请人消费，获得10%的分成。</text>
		</view>
		<view class="bgimgbox">
			<image class="Rulesimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17187606070921374.png" @click="isRule = true"></image>
			<view class="Guidelines">
				<view class="baibg">
					<image class="tittle_1" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17187621796901244.png"></image>
					<view class="midbox">
						<view class="midcontent">
							<image class="midimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718762204136657.png"></image>
							<view class="title_2">发送邀请</view>
							<view class="title_2">给新人好友</view>
						</view>
						<image class="Arrowimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718762263038215.png" style="margin-left: 34rpx;"></image>
						<view class="midcontent">
							<image class="midimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1719999115357328.png"></image>
							<view class="title_2">新人好友</view>
							<view class="title_2">成功完成注册</view>
						</view>
						<image class="Arrowimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718762263038215.png"></image>
						<view class="midcontent">
							<image class="midimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718762241974752.png"></image>
							<view class="title_2">积分奖励</view>
							<view class="title_2">到账可兑换会员</view>
						</view>
					</view>
					<button class="Invitebox" type="default" data-name="shareBtn" open-type="share">
						<image class="Inviteimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718763132587390.png"></image>
					</button>
					
					<view class="title_3">* 每成功邀请1人，奖励1000积分，最多可邀请10人</view>
				</view>
			</view>
		</view>

		<view class="Invitelist">
			<view class="listTltie">
				<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718763942987772.png" class="Line"></image>
				<view class="text">我的邀请</view>
				<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17187639546081016.png" class="Line"></image>
			</view>
			<view class="text_1">已成功邀请 {{userList.length}}/10</view>
			<view>
				
			</view>
			<view class="userlist" v-for="(l,i) in userList" :key="i" @click="nav_to(`/pages/user/user_visitor?ub=-1&id=${l.ID}`)">
				<image class="userimg" :src="l.HeadImgUrl" mode="aspectFill"></image>
				<view class="userbox">
					<view class="name">{{$util.entitiesToUtf16(l.Name)}}</view>
					<view class="Status bg3">邀请成功</view>
				</view>
				<!-- <view class="button" @click="isclose = true">查看奖励</view> -->
			</view>
			<!-- <view class="userlist">
				<image class="userimg" src="" mode="aspectFill"></image>
				<view class="userbox">
					<view class="name">姜惠元</view>
					<view class="Status bg2">审核中</view>
				</view>
				<view class="button">取消邀请</view>
			</view>
			<view class="userlist">
				<image class="userimg" src="" mode="aspectFill"></image>
				<view class="userbox">
					<view class="name">姜惠元</view>
					<view class="Status bg3">邀请成功</view>
				</view>
				<view class="button">取消邀请</view>
			</view> -->
		</view>
		<view class="showrule" v-if="isRule">
			<view class="Rulebox">
				<view class="ruletitle">活动规则</view>
				<view class="ruletitle_1">1、每个用户可以最多邀请10个新用户</view>
				<view class="ruletitle_1">2、每个新用户进入小程序之后，必须要上传至少一张本人滑雪相关照片</view>
				<view class="ruletitle_1">3、新用户照片通过审核后，通过消息栏的官方消息发送新用户邀请成功的信息，并且在积分详情页有显示</view>
				<view class="Close" @click=" isRule = false">知道了</view>
			</view>
		</view>
		
		<view class="showrule" v-if="isclose">
			<view class="closeinvite">
				<view class="closetitle">取消邀请</view>
				<view class="closetext">确认取消邀请该新人好友</view>
				<view class="bottombox">
					<view class="btn1"  @click="isclose = false">取消</view>
					<view class="btn2" @click="isclose = false">确定</view>
				</view>
			</view>
		</view>



		<uni-popup ref="poster" type="center">
			<view class="painting">
				<swiper class="swiper" :indicator-dots="false" circular="true">
					<swiper-item v-for="(l,i) in photosurl" :key="i">
						<image :src="l.img" :style="{ width: viewimgwidth_b + 'rpx', height: viewimgheight_b + 'rpx' }"
							mode="" @tap="close_poster">
						</image>
						<view class="keep">邀请好友加入，最高可获得20%奖励</view>
						<view class="tips" @click="saveimg(i)"><uni-icons type="download" size="24"
								color="#fff"></uni-icons></view>
					</swiper-item>
				</swiper>
			</view>
		</uni-popup>

		<uni-popup ref="setting" type="center">
			<view class="pop_con">
				<view class="hd f1">设置代理佣金</view>
				<view class="inp">
					<view class="name">
						拉新佣金(元)
					</view>
					<view class="gradeList">
						<input v-model="NewU_Com" type="number" placeholder="请输入">
					</view>

				</view>
				<view class="inp">
					<view class="name">
						消费分成(%，最大15%)
					</view>
					<view class="gradeList">
						<input v-model="Com_Rate" type="number" max="15" placeholder="最大值为15">
					</view>
				</view>
				<view class="inp">
					<view class="name">
						收礼分成(%，最大10%)
					</view>
					<view class="gradeList">
						<input v-model="gift_Com_Rate" type="number" max="10" placeholder="最大值为10">
					</view>
				</view>
				<view class="btns">
					<u-button text="取消" @click="$refs['setting'].close()"></u-button>
					<u-button type="success" text="确定" @click="setting_sub"></u-button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import topStatus from "@/components/topStatus/topStatus.vue";
	export default {
		components: {
			topStatus,
		},
		data() {
			return {
				topNav: false,//吸顶
				isRule:false,
				isclose:false,
				userList: [],
				share_code: '',
				activityList: [],
				posterimgwidth_b: '',
				posterimgheight_b: '',
				posterimgwidth: '',
				posterimgheight: '',
				photosurl: [],
				amount_of_money: 0.0,
				viewimgwidth_b: '',
				viewimgheight_b: '',

				is_super_user: false,
				sel_user: 0,
				Com_Rate: 0,
				gift_Com_Rate: 0,
				NewU_Com: 0,
				
				dealerList:[]
			}
		},
		async onLoad() {
			this.user = uni.getStorageSync('user');

			let res = await this.$api.post('/SaleChannel/SaleChannelDetail', {
				CompanyID: 6002
			});

			if (res.data) {
				if (res.data.SaleLevel == '特级代理') {
					this.is_super_user = true;
				}
			}

			this.user_list();
			
			this.dealer_list();
		},
		onPageScroll: function (e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > 210) {
				this.topNav = true
			} else {
				this.topNav = false
			}
		},
		methods: {
			goBack(){
				uni.navigateBack();
			},
			go_dealer(){
				
				this.nav_to('/pages/user/dealers?id='+this.user.UserID)
			},
			set_show(l) {
				console.log('======================')
				this.sel_user = l.ID;
				this.NewU_Com = l.NewUser_Commission;
				this.Com_Rate = l.F_Commission_Rate;
				this.gift_Com_Rate = l.T_Commission_Rate;

				this.$refs['setting'].open();
			},
			async setting_sub() {

				let res = await this.$api.post("SaleChannel/SetCommissionInfo", {
					UserID: this.sel_user,
					NewUser_Commission: this.NewU_Com,
					F_Commission_Rate: this.Com_Rate,
					T_Commission_Rate: this.gift_Com_Rate
				});

				this.user_list();

				this.$refs['setting'].close();


			},
			timeFormat(time) {
				time = time.replace(/T/, ' ');
				return time.replace(/\..*/, '');
			},
			async user_list() {
				let res = await this.$api.post("SaleChannel/MyRecommendUsersV2");
				this.userList = res.data

				this.userList.forEach(item => {
					this.amount_of_money = item.UserSaleMoney + this.amount_of_money;
				});

				this.amount_of_money = parseFloat(this.amount_of_money).toFixed(2);
				
			},
			async dealer_list() {
				let res = await this.$api.post("SaleChannel/MyDealers",{
					UserID:this.user.UserID
				});
				this.dealerList = res.data
			},
			async getImgHeight(src) {
				let img = (await uni.getImageInfo({
					src
				}));
				this.posterimgheight = img[1].height;
				//this.posterimgheight=img[1].height / (uni.upx2px(img[1].height)/img[1].height);
			},
			async getImgWidth(src) {
				let img = (await uni.getImageInfo({
					src
				}));
				this.posterimgwidth = img[1].width;
				//this.posterimgwidth=img[1].width / (uni.upx2px(img[1].width)/img[1].width);
			},

			goto_my_profit() {
				this.nav_to('/pages/user/integral');
			},
			open_poster() {

				this.$refs.poster.open();
				this.photosurl = [];
				this.activityList.ShareImages.forEach((l, i) => {
					this.draw(i);
				})
			},
			close_poster() {
				this.$refs['poster'].close();
			},
			sharePYQ() {
				const user = uni.getStorageSync("user");
			
				const pid = user.UserID;
				let id = user.UserID;
			
				const BaseUrl = "http://h5.golf.xiaojusmart.com/#/";
				const paseUrl = `pages/H5/user_detail?id=${id}&pid=${pid}`;
				let shareUrl = BaseUrl + paseUrl;
			
				console.log('share url-----' + shareUrl)
			
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 0,
					href: shareUrl,
					title: '【雪遇】我喜欢在雪遇约人滑雪，你也来报名吧',
					// summary: _this.goodsDetails.ProductName,
					imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
					success: (res) => {
						this.$refs.share.close()
					},
					fail(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			
			
			
			},
			shareWX() {
				const user = uni.getStorageSync("user");
			
				const pid = user.UserID;
				let id = user.UserID;
			
				const BaseUrl = "http://h5.golf.xiaojusmart.com/#/";
				const paseUrl = `pages/H5/user_detail?id=${id}&pid=${pid}`;
				let sharUrl = BaseUrl + paseUrl;
				let _this = this;
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 5,
					imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
					title: '【雪遇】我喜欢在雪遇约人组局滑雪，你也来报名吧',
					miniProgram: {
						id: 'gh_ff1a33213d99',
						path: 'pages/user/user_visitor?id=' + id + '&pid=' + pid,
						type: 0,
						webUrl: sharUrl
					},
					success: (res) => {
						this.$refs.share.close()
					},
					fail(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			
				// this.is_app_share_show = false;
			},
			async draw(i) {
				uni.showLoading({
					title: '正在生成',
					mask: true
				});
				const system = uni.getSystemInfoSync();
				const w = system.windowWidth / 750;


				//src: this.activityList.ShareImages[i].BackImg


				this.getImgWidth(this.user.UserImgs);
				this.getImgHeight(this.user.UserImgs);


				const posterimg = await uni.getImageInfo({
					src: this.user.UserImgs
				});


				const codeimg = await uni.getImageInfo({
					src: this.share_code
				});

				const codeimgX = this.activityList.ShareImages[i].QR_Location.split(',')[0] - 0
				const codeimgY = this.activityList.ShareImages[i].QR_Location.split(',')[1] - 0

				const codeimgwidth = this.activityList.ShareImages[i].QR_Location.split(',')[2] - 0
				const codeimgheight = this.activityList.ShareImages[i].QR_Location.split(',')[3] - 0

				this.posterimgwidth_b = this.activityList.ShareImages[i].QR_Location.split(',')[4] - 0
				this.posterimgheight_b = this.activityList.ShareImages[i].QR_Location.split(',')[5] - 0

				const fillTextX = this.activityList.ShareImages[i].QR_Location.split(',')[6] - 20
				const fillTextY = this.activityList.ShareImages[i].QR_Location.split(',')[7] - 0

				var context = uni.createCanvasContext('firstCanvas' + i);

				this.posterimgheight = this.posterimgheight * this.posterimgwidth_b / this.posterimgwidth;

				this.viewimgwidth_b = this.posterimgwidth_b * 0.9;
				this.viewimgheight_b = this.posterimgheight * 0.9;

				context.beginPath();
				context.drawImage(posterimg[1].path, 0, 0, this.posterimgwidth_b * w, this.posterimgheight * w);
				context.closePath();


				context.beginPath();
				context.setFontSize(36 * w);
				context.setFillStyle('#FFFFFF');
				context.fillText('雪遇', 20 * w, 60 * w);
				context.closePath();

				context.beginPath();
				context.setFontSize(36 * w);
				context.setFillStyle('#FFFFFF');
				context.fillText('滑雪社交组局平台', 20 * w, 110 * w);
				context.closePath();

				context.beginPath();
				context.setFontSize(36 * w);
				context.setFillStyle('#FFFFFF');
				context.fillText(this.user.Name, 20 * w, (this.posterimgheight - codeimgheight) * w);
				context.closePath();

				context.beginPath();
				context.setFontSize(26 * w);
				context.setFillStyle('#FFFFFF');
				context.fillText('邀请您加入雪遇', 20 * w, (this.posterimgheight - codeimgheight + 40) * w);
				context.closePath();

				context.beginPath();
				context.setFontSize(20 * w);
				context.setFillStyle('#FFFFFF');
				context.fillText('长按识别二维码', fillTextX * w, (this.posterimgheight - codeimgheight - 10) * w);
				context.closePath();

				context.beginPath();
				context.drawImage(codeimg[1].path, codeimgX * w, (this.posterimgheight - codeimgheight - 30) * w,
					codeimgwidth * w, codeimgheight * w);
				context.closePath();

				context.draw(false, () => {
					setTimeout(() => {
						var that = this
						uni.canvasToTempFilePath({
							x: 0,
							y: 0,
							canvasId: 'firstCanvas' + i,
							success(res) {
								// that.photosurl = res.tempFilePath
								// console.log(that.photosurl)
								that.photosurl.push({
									img: res.tempFilePath
								})
								uni.showToast({
									title: '生成成功'
								});
							},
						})
					}, 100)
				});

			},
			//点击保存图片
			saveimg(i) {
				var that = this
				uni.showLoading({
					title: '正在保存',
					mask: true
				});
				uni.authorize({
					/* scope.writePhotosAlbum 类型是保存到相册 */
					scope: 'scope.writePhotosAlbum',
					success() {
						/* 已授权进入 */
						/* 保存图片到相册方法方法 */
						/* 获取图片的信息 */
						uni.getImageInfo({
							src: that.photosurl[i].img,
							success: function(image) {
								/* 保存图片到手机相册 */
								uni.saveImageToPhotosAlbum({
									filePath: image.path,
									success: function() {
										uni.showToast({
											title: '保存成功'
										});
										that.close_poster()
									},
									// complete(res) {
									// 	console.log(res);
									// }
								});
							},
							fail: function() {
								console.log(that.photosurl[i].img);
							}
						});
					},
					complete(res) {
						/* 判断如果没有授权就打开设置选项让用户重新授权 */
						uni.getSetting({
							success(res) {
								if (!res.authSetting['scope.writePhotosAlbum']) {
									/* 打开设置的方法 */
									uni.showModal({
										content: '没有授权保存图片到相册,点击确定去允许授权',
										success: function(res) {
											if (res.confirm) {
												/* 打开设置的API*/
												uni.openSetting({
													success(res) {
														console.log(res.authSetting);
													}
												});
											} else if (res.cancel) {
												uni.showModal({
													cancelText: '取消',
													confirmText: '重新授权',
													content: '你点击了取消，将无法进行保存操作',
													success: function(res) {
														if (res.confirm) {
															uni.openSetting({
																success(
																	res) {
																	/* 授权成功 */
																	console
																		.log(
																			res
																			.authSetting
																		);
																}
															});
														} else if (res.cancel) {
															console.log('用户不授权');
														}
													}
												});
											}
										}
									});
								}
							}
						});
					}
				})
			}
		}
	}
</script>


<style lang="scss">
	$main-color: #111;
	$bg-color-dark: #000;
	$tips-color: #111;
	page{
		background-color: #FDA17A;
	}
	button::after {
		border: none !important;
		border-radius: 0 !important;
	}
	button[plain] {
		border: 0 !important;
		border-radius: 0 !important;
	}
	button{
		background-color: transparent !important;
	}
	.page_top {
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	box-sizing: border-box;
	transition: 0.3s all;
}

.tabsBack {
	height: 44px;
	padding-left: 32rpx;
	display: flex;
	align-items: center;
	z-index: 999;

	.topTitle {
		padding-left: 20rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
	}

	.blackbox {
		width: 52rpx;
		height: 52rpx;
		display: flex;
		align-items: center;
	}

	image {
		width: 24rpx;
		height: 36rpx;
		display: block;
	}
}
	.box {
		padding-bottom: 80rpx;
		position: relative;
		.bgimgbox{
			background-image: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1719991968447542.png');
			background-size: cover;
			background-repeat: no-repeat;
			width: 100%;
			height: 1000rpx;
			position: relative;
			.Rulesimg{
				width: 48rpx;
				height: 172rpx;
				position: absolute;
				right: 0;
				top: 368rpx;
			}
			.Guidelines{
				width: 702rpx;
				height: 574rpx;
				background: linear-gradient( 141deg, #FFCC9B 0%, #FEAA68 22%, #FA4E6F 100%);
				border-radius: 24rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 774rpx;
				.baibg{
					width: 670rpx;
					height: 540rpx;
					background: #FFFFFF;
					border-radius: 24rpx;
					border: 4rpx solid #FFFFFF;
					margin: 16rpx auto;
					.tittle_1{
						width: 390rpx;
						height: 74rpx;
						margin-left: 144rpx;
						display: block;
					}
					.midbox{
						display: flex;
						// align-items: center;
						margin-top: 50rpx;
    					justify-content: space-between;
						padding: 0 38rpx;
    					box-sizing: border-box;
						.Arrowimg{
							width: 40rpx;
							height: 32rpx;
							margin-top: 32rpx;
						}
						.midcontent{
							text-align: center;
							.midimg{
								width: 96rpx;
								height: 96rpx;
							}
							.title_2{
								font-size: 22rpx;
								color: #333333;
							}
						}
					}
					.Invitebox{
						width: 514rpx;
						height: 100rpx;
						margin: 0 auto;
						margin-top: 46rpx;
					}
					.Inviteimg{
						width: 514rpx;
						height: 100rpx;
						display: block;

					}
					.title_3{
						margin-top: 30rpx;
						text-align: center;
						font-size: 22rpx;
						color: #999999;
					}
				}
			}
		}
		.Invitelist{
			width: 704rpx;
			// height: 728rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			border: 4rpx solid #FFFFFF;
			margin: 0 auto;
    		margin-top: 366rpx;
			padding: 32rpx 24rpx;
    		box-sizing: border-box;
			.listTltie{
				display: flex;
				align-items: center;
				justify-content: center;
				// margin-top: 32rpx;
				.Line{
					width: 132rpx;
					height: 16rpx;
				}
				.text{
					font-size: 36rpx;
					font-weight: bold;
					color: #FE3232;
					margin: 0 16rpx;
				}
			}
			.text_1{
				font-size: 28rpx;
				color: #FE3232;
				text-align: center;
				margin-top: 8rpx;
			}
			.userlist{
				display: flex;
				align-items: center;
				margin-left: 20rpx;
				margin-bottom: 50rpx;
				.userimg{
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
					background-color: yellowgreen;
				}
				.userbox{
					display: flex;
					align-items: center;
					margin-left: 20rpx;
					.name{
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
					}
					.Status{
						padding: 2rpx 12rpx;
						border-radius: 8rpx;
						color: #fff;
						font-size: 20rpx;
						font-weight: bold;
						// text-align: center;
						// line-height: 32rpx;
						margin-left: 20rpx;
					}
					.bg1{
						background-color: #42B5A5;
					}
					.bg2{
						background-color: #F9A245;
					}
					.bg3{
						background-color: #43B542;
					}
				}
				.button{
					width: 160rpx;
					height: 64rpx;
					border-radius: 32rpx;
					background: linear-gradient( 98deg, #FE6F5D 0%, #FE2851 100%);
					font-size: 24rpx;
					color: #fff;
					text-align: center;
					line-height: 64rpx;
					margin-left: auto;
				}
			}
		}
		.showrule{
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100%;
			background-color: rgba(0,0,0,0.5);
		}
		.Rulebox{
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			width: 600rpx;
			height: fit-content;
			background: linear-gradient( 180deg, #FEEDED 0%, #FFFFFF 100%);
			border-radius: 32rpx;
			border: 4rpx solid #FFFFFF;
			padding: 32rpx 48rpx;
			box-sizing: border-box;
			.ruletitle{
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
				text-align: center;
				margin-bottom: 32rpx;
			}
			.ruletitle_1{
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 16rpx;
			}
			.Close{
				width: 510rpx;
				height: 96rpx;
				text-align: center;
				line-height: 96rpx;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				background: linear-gradient( 98deg, #FE6F5D 0%, #FE2851 100%);
				border-radius: 48rpx;
				margin-top: 32rpx;
			}
		}
		.closeinvite{
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			width: 600rpx;
			height: 354rpx;
			background: linear-gradient( 180deg, #FEEDED 0%, #FFFFFF 100%);
			border-radius: 32rpx;
			border: 4rpx solid #FFFFFF;
			padding: 48rpx 40rpx;
			box-sizing: border-box;
			text-align: center;
			.closetitle{
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 32rpx;
			}
			.closetext{
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 48rpx;
			}
			.bottombox{
				display: flex;
				.btn1{
					width: 248rpx;
					height: 88rpx;
					border-radius: 48rpx;
					border: 2rpx solid #FF2B43;
					text-align: center;
					line-height: 88rpx;
					color: #FF2B43;
					font-size: 32rpx;
					font-weight: bold;
				}
				.btn2{
					width: 248rpx;
					height: 88rpx;
					background: linear-gradient( 98deg, #FE6F5D 0%, #FE2851 100%);
					border-radius: 48rpx;
					text-align: center;
					line-height: 88rpx;
					color: #fff;
					font-size: 32rpx;
					font-weight: bold;
					margin-left: 24rpx;
				}
			}
		}
		.conbox{
			background-color: #fff;
			border-radius: 24rpx;
			width: 702rpx;
			margin: 0 24rpx;
			margin-top: 24rpx;
			padding: 20rpx 0;
			box-sizing: border-box;
		}
		.head_portrait {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			margin-top: 30rpx;
			position: relative;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 100%;
			}

			text {
				font-size: 32rpx;
				line-height: 32rpx;
				color: $main-color;
				margin-top: 10rpx;
			}
		}

		.acquire {
			display: flex;
			justify-content: space-around;
			margin-top: 30rpx;

			.share {
				width: 240rpx;
				height: 70rpx;
				// background: linear-gradient(180deg, #fef0bc 0%, #b98b51 100%);
				border-radius: 35rpx;
				border: 1rpx solid #0D0D0D;
				color: #0D0D0D;
				display: flex;
				justify-content: center;
				line-height: 70rpx;
				font-size: 32rpx;
				margin: 0;
			}
			.sharebox{
				width: 240rpx;
				height: 70rpx;
				background: #0D0D0D;
				border-radius: 35rpx;
				color: #fff;
				display: flex;
				justify-content: center;
				line-height: 70rpx;
				font-size: 32rpx;
				margin: 0;
			}
		}

		.tips {
			padding: 20rpx 20rpx 0;
			color: $tips-color;
			font-size: 26rpx;
		}

		.data_statistics {
			height: 120rpx;
			padding: 30rpx 20rpx 20rpx 20rpx;
			margin-top: 30rpx;
			display: flex;
			justify-content: space-around;
			margin: 20rpx;

			view {
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				&:first-child {
					border-right: 1rpx solid #E4E4E4;
				}
				
				
				
				&:last-child {
					// border-left: 6rpx solid #989898;
				}

				text {
					color: #333333;
					font-weight: 600;
					font-size: 48rpx;
					margin-bottom: 10rpx;
				}
				.yong{
					font-size: 28rpx;
					color: #999999;
				}
			}
		}


		.canvas {
			overflow: hidden;
			position: relative;

			.canvasposition {
				position: absolute;
				left: 4000rpx;
				top: 0;
			}
		}

		.painting {
			.swiper {
				width: 750rpx;
				height: 1334rpx;
				padding-top: 20rpx;
				text-align: center;

				image {
					margin: 20px;
				}

				.keep {
					width: 70%;
					height: 60rpx;
					background: #ffc371;
					color: #ffffff;
					border-radius: 20rpx;
					font-size: 28rpx;
					line-height: 60rpx;
					margin: 0 auto;
					text-align: center;
				}

				.tips {
					line-height: 120rpx;
				}
			}
		}
	}


	.pop_con {
		height: 680rpx;
		background: #fff;
		width: 650rpx;
		border-radius: 16rpx;
		border: 1px solid #FEF0BC;

		.hd {
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: 1px solid #eee;
			text-align: center;
			color: #333;
			font-weight: bolder;
		}

		.inp {
			margin-top: 30rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			display: flex;
			flex-direction: column;

			.name {
				color: #000;
				height: 60rpx;
				line-height: 60rpx;
				margin-bottom: 10rpx;
			}

			.gradeList {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.grade {
					box-sizing: border-box;
					height: 60rpx;
					width: 160rpx;
					text-align: center;
					line-height: 60rpx;
					border-radius: 10rpx;
					font-size: 14px;
					color: #333;
					border: 1px solid #FEF0BC;
					margin-left: 12rpx;
				}

				.cycle {
					background-color: #333;
					color: #fff;
				}

				input {
					color: #7c7c7c;
				}
			}

		}

		.btns {
			margin-top: 40rpx;
			display: flex;
			padding-left: 30rpx;
			padding-right: 30rpx;
			justify-content: space-between;

			/deep/ .u-button__text {
				color: #333;
			}

			/deep/ .u-button--success {
				text {
					color: #fff !important;
				}

				background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
			}

			/deep/ .u-button {
				width: 290rpx;
			}
		}
	}
</style>